<template>
    <div id="courseList" :style="style">
        <!--@scroll="scrolling" todo 可能会有的滚动自动加载更多-->
        <div class="title">
            <h1>课件</h1>
            <div class="placeholder"></div>
            <div class="rank">排序</div>
            <span :class="{'active':condition==1}" @click="setCondition(1)">最新</span>
            <span :class="{'active':condition==2}" @click="setCondition(2)">按标题</span>
            <span :class="{'active':condition==3}" @click="setCondition(3)">按浏览量</span>
        </div>
        <ul class="list">
            <li is="item" v-for="el in showList" :info="el" :link="'courseDetail'"></li>
        </ul>
        <!--<button>上一页</button>-->
        <!--<button>下一页</button>-->
    </div>
</template>

<script type="text/babel">

    let VueComponent_Item = require('../../component/item/courseItem.vue');
    var Status_tab = require('../../component/sideNav/tabStatus');
    let message = require('../../component/message/message.es6');

    let Condition = {
        byTime: 1,
        byTitle: 2,
        byView: 3
    };
    var SortFunction = function (a, b, condition) {
        switch (condition) {
            case Condition.byTime:
            {
                return (a.updated || 0) < (b.updated || 0);
            }
            case Condition.byTitle:
            {
                return a.title < b.title;
            }
            case Condition.byView:
            {
                return (a.view || 0) < (b.view || 0);
            }
        }
    };

    module.exports = {
        props: ['width', 'bannerShow', 'tab'],
        data: ()=>({
            list: [],
            showList: [],
//            index: 0,
//            limit: 1,
            condition: 1
        }),
        computed: {
            style: function () {
                return {
                    'width': (this.width * 0.7) + 'px',
                    'left': (this.width * 0.3) + 'px'
                }
            }
        },
        methods: {
            setCondition: function (condition) {
                this.condition = condition;
                let that = this;
                this.showList = this.list.sort((a, b)=> {
                    return SortFunction(a, b, that.condition);
                });
            }
//            scrolling: function () {
//                console.dir(this.$el);
//                console.log(this.$el.scrollTop);
//                console.log(this.$el.scrollHeight);
//            }
        },
        components: {
            item: VueComponent_Item
        },
        created: function () {
            this.tab = Status_tab.course;
            this.bannerShow = true;
            this.$http({url: '/api/course/list', method: 'GET'})
                    .then((res)=> {
                        // success callback
                        let that = this;
                        this.list = res.data.list.map((c)=> {
                            var t = new Date(c.updated);
                            return {
                                created: `${t.getFullYear()}-${t.getMonth() + 1}-${t.getDate()}`,
                                id: c._id,
                                tags: c.tags,
                                title: c.title,
                                view: c.view
                            }
                        });
                        this.showList = this.list.sort((a, b)=> {
                            return SortFunction(a, b, that.condition);
                        });
                    }, function (response) {
                        // error callback
                    });
        }
    }
</script>